<template>
  <div class="container">
    <div v-for="content in contents" :key="content.num">
      <div class="title">
        <span>{{ content.num }}</span> {{ content.title }}
      </div>
      <p>{{ content.passage }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Statement",
  data () {
    return {
      contents: [
        {
          num: '01', title: '为什么我的帖子被删除了？', passage: `
                    您的帖子可能违反了发帖规范，请阅读发帖规范确认自己的的违规内容。
					若内容没有违规，可联系平台管理员。`
        }
        // {
        //   num: '02', title: '为什么要做自习室预约?', passage: `
        //         这个程序设计的最终目的是实现对座位的有序高效管理。
        //         学生通过该系统可以实时查看各教学楼自习室与座位的使用情况，
        //         使学生方便、快捷地查找空余的座位。`
        // },
        // {
        //   num: '03', title: '"自习室预约"是谁开发的?', passage: `
        //             "自习室预约"的开发者是校网信中心学生开发组的成员共同开发的。
        //             大家也是现学现用，如果有做的不好的地方，还望客官能多多谅解。
        //             当然，如果你对本程序有任何好的创意和意见都可以在问题反馈中告诉我们噢！`
        // },
        // {
        //   num: '04', title: '"自习室预约"发展与展望', passage: `
        //             我们期望“自习室预约”能为缓解图书馆座位压力、方便同学们预约空课室自习做出贡献。
        //             未来希望能根据学校的要求和大家的意见继续完善功能和美化页面，
        //             如果您有什么宝贵的建议，请千万不要吝啬噢~
        //             `
        // }
      ],
    }
  }

}
</script>

<style scoped>
.container {
  margin-top: 25px;
  overflow: auto !important;
}

/* 设置文字背景颜色 */
.title {
  font-size: 20px;
  text-align: start;
  display: inline-block;
  position: relative;
}

.title::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-color: rgba(124, 144, 235, 0.2);

}

.title span {
  color: #448aff;
  font-size: 24px;
  font-style: oblique;
  font-family: sans-serif;
}

p {
  margin: 15px 0;
  color: #aaaaaa;
  text-indent: 20px;
}
</style>
